  <!-- 选择订单 -->
<template>
  <el-dialog
    v-model="visibility"
    title="选择订单"
    width="65%"
    draggable
    :close-on-click-modal="false">
    <el-card class="search_card">
      <el-form
        :model="formData"
        class="search_form">
        <el-row>
          <el-form-item label="提货主体公司">
            <el-select
              v-model="formData.baseCompanyId"
              placeholder="提货主体公司"
              style="width: 150px"
              clearable>
              <el-option
                v-for="item in companySimpleNameList"
                :key="item.id"
                :label="item.simple_name"
                :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="米厂">
            <el-select
              v-model="formData.baseRiceBarnId"
              placeholder="米厂"
              style="width: 150px"
              clearable>
              <el-option
                v-for="item in riceBarnSimpleNameList"
                :key="item.id"
                :label="item.simple_name"
                :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="采购订单名称">
            <el-input
              v-model="formData.purchaseOrderName"
              style="width: 150px"
              placeholder="采购订单名称"
              clearable>
              <template #prefix>
                <el-icon>
                  <search />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div>
        <el-button
          type="primary"
          @click="getList(formData)">
          <template #icon>
            <el-icon>
              <search />
            </el-icon>
          </template>
          {{ config.button.text.query }}
        </el-button>
        <el-button @click="reset">
          <template #icon>
            <el-icon>
              <Refresh />
            </el-icon>
          </template>
          {{ config.button.text.reset }}
        </el-button>
      </div>
    </el-card>

    <el-card class="table_card">
      <Table
        :data="tableData"
        v-loading="tableLoading">
        <el-table-column
          prop="baseCompanySimpleName"
          label="主体公司名称"
          :resizable="false" />
        <el-table-column
          prop="baseRiceBarnSimpleName"
          label="米厂名称"
          :resizable="false" />
        <el-table-column
          prop="purchaseOrderName"
          label="采购订单名称"
          :resizable="false" />
        <el-table-column
          prop="purchaseOrderNumber"
          label="订单编号"
          :resizable="false" />
        <el-table-column
          prop="purchaseDate"
          label="采购时间"
          :resizable="false">
          <template #default="scope">
            {{ formatDate(scope.row.purchaseDate) }}  
          </template>
        </el-table-column>
        <el-table-column
          prop="baseCapitalWarehouseName"
          label="资金仓库名称"
          :resizable="false" />
        <el-table-column
          label="操作"
          width="100"
          :resizable="false">
          <template #default="scope">
            <el-button
              type="warning"
              @click="saveEvent(scope.row)">
              选择
            </el-button>
          </template>
        </el-table-column>
      </Table>
      <Pagination
        :pageNum="pageNum"
        :pageSize="pageSize"
        :total="total"
        @handle-size-change="(val) => pageSize = val"
        @handle-current-change="(val) => pageNum = val" />
    </el-card>

    <template #footer>
      <div>
        <el-button @click="closeEvent">{{ config.button.text.close }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Pagination from "@/components/Pagination.vue"
import Table from "@/components/Table.vue"
import ApiBaseCompany from "@/api/modules/base-company"
import ApiBaseRiceBarn from "@/api/modules/base-rice-barn"
import { useTable } from "@/hooks/useTable";
import config from "@/common/element-plus/config";
import ApiPurchaseOrder from "@/api/modules/purchase-order"
import { formatDate } from "@/common/utils/date";
import { useRouter } from "vue-router"

// 路由
const router = useRouter()
// 查询表单
const formData = ref({})
// 公司简称列表
const companySimpleNameList = ref([])
// 米厂简称列表
const riceBarnSimpleNameList = ref([])
// 弹窗
const visibility = ref(false)

const { tableMethods, tableState, pagination } = useTable({
  fetchDataApi: async (data) => {
    const { pageSize, pageNum } = pagination
    const res = await ApiPurchaseOrder.selectPage(data, {
      pageNum: pageNum.value,
      pageSize: pageSize.value,
    })
    return {
      list: res.data.records,
      total: res.data.total
    }
  }
})
const { getList } = tableMethods
const { pageSize, pageNum } = pagination
const { total, tableLoading, tableData } = tableState

// emits
const emits = defineEmits(["save"])

// 保存
const saveEvent = (row) => {
  emits("save", row)
  visibility.value = false
}

// 关闭弹窗
const closeEvent = () => {
  router.back()
  visibility.value = false
}

// 重置
const reset = () => {
  formData.value = {}
  getList()
}

defineExpose({ visibility })

onMounted(async () => {
  let data = await ApiBaseCompany.getSimpleNameList()
  companySimpleNameList.value = data.data
  data = await ApiBaseRiceBarn.getSimpleNameList()
  riceBarnSimpleNameList.value = data.data
})
</script>

<style lang="scss" scoped>
.search_card {
  margin-bottom: 4px;

  :deep(.el-card__body) {
    padding: 10px;
    display: flex;
    justify-content: space-between;
  }

  .el-button {
    margin: 5px 10px 5px 0;
  }

  .el-form-item {
    margin-right: 10px;
    padding: 5px 0;
  }
}

.table_card {
  :deep(.el-card__body) {
    padding: 0;
  }
}
</style>